<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        min-height: 100vh;
        display: grid; /*网格*/
        justify-content: center;
        align-content: center;
        /*  对苹果手机友好 */
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        line-height: 2;
        background-color: #ffc600;
    }
    /* .container::-webkit-scrollbar{display: none;} */
    /* .wrapper::-webkit-scrollbar{display: none;} */
    .container::-webkit-scrollbar {display:none}
    .wrapper{
        width: 400px;
        height: 80vh;
        padding: 20px;
        border: 1px solid #000;
        background: white;
        display: grid;
        grid-template-rows: 1fr auto;
    }
    button.accept{
        background: #ff0060;
        color: white;
        font-size: 1rem;
        padding: 20px;
        transition: all 0.2s;
    }
    button.accept[disabled]{
        opacity: 0.1;

    }
    .terms-and-condition{
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
        /* padding: 0 25px 25px 0 ; */
        /* overflow: hidden; */
        
        
    }
</style>
<body>
    <div class="container">
        <div class="wrapper">
            <div class="terms-and-condition">
                <p>程毛毛恋爱声明</p>
                <p>
                    专注，让事情变得简单
                    专注，让事情变得简单
                    专注，让事情变得简单
                    专注，让事情变得简单
                    专注，让事情变得简单
                    专注，让事情变得简单
                    专注，让事情变得简单
                    专注，让事情变得简单
                    专注，让事情变得简单
                    专注，让事情变得简单
                    专注，让事情变得简单
                    专注，让事情变得简单
                    专注，让事情变得简单
                    专注，让事情变得简单
                    专注，让事情变得简单
                    专注，让事情变得简单
                    专注，让事情变得简单
                    专注，让事情变得简单
                    专注，让事情变得简单
                    专注，让事情变得简单
                    专注，让事情变得简单
                    专注，让事情变得简单
                    专注，让事情变得简单
                    <strong class="watch"></strong>
                </p>
                <p>
                    专注清单是简单易行的时间和任务管理应用，让您随时随地管理任务并让您高效执行任务，全球数以百万用户从中获得效率提升。
                </p>
                <p>
                    专注清单是简单易行的时间和任务管理应用，让您随时随地管理任务并让您高效执行任务，全球数以百万用户从中获得效率提升。
                </p>
                <p>
                    专注清单是简单易行的时间和任务管理应用，让您随时随地管理任务并让您高效执行任务，全球数以百万用户从中获得效率提升。
                </p>
                <p>
                    专注清单是简单易行的时间和任务管理应用，让您随时随地管理任务并让您高效执行任务，全球数以百万用户从中获得效率提升。
                </p>
                <p>
                    专注清单是简单易行的时间和任务管理应用，让您随时随地管理任务并让您高效执行任务，全球数以百万用户从中获得效率提升。
                </p>
                <p>
                    专注清单是简单易行的时间和任务管理应用，让您随时随地管理任务并让您高效执行任务，全球数以百万用户从中获得效率提升。
                </p>
                <p>
                    专注清单是简单易行的时间和任务管理应用，让您随时随地管理任务并让您高效执行任务，全球数以百万用户从中获得效率提升。
                </p>

            </div>
            <button class="accept" disabled>Accept</button>
        </div>
    </div>
    <!-- <style>
        button{
            background: green;
        }
        
        .accept{
            padding: 20px;
            background: yellow;
        }
        .accept{
            padding: 2px;
        }
        button.accept{
            background: red;
        }

    </style> -->
    <script>
        // (function(){
        //     const oAcceptBtn = document.querySelector('.accept');
        // setTimeout(() =>{
        //      oAcceptBtn.removeAttribute('disabled');
        // }
        // ,2000)
        // })()
        (function(){
            const terms = document.querySelector('.terms-and-condition'),
                watch = document.querySelector('.watch'),
                button = document.querySelector('.accept');

            function callback(payload){
                console.log(payload);
                // console.log(payload[0].interSectionRatio);
                if(payload[0].intersectionRatio == 1){
                    button.removeAttribute('disabled');
                }
            }
            // 观看一个元素  视窗里面是否已经出现了它？
            // 一个观察对象 ， 
            const ob = new IntersectionObserver(callback,{
                root:terms,
                threshold:1
            });
            ob.observe(terms.getElementsByTagName('p')[
                terms.getElementsByTagName('p').length-1
            ]);
            // ob.observe(terms.lastChild);
        })()
    

        
       

    </script>
</body>
</html>